const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {HotModuleReplacementPlugin} = require('webpack')

// webpack-dev-server 现在支持 cli 的方式调用
// npx webpack serve
// https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // webpack-dev-server 一般是在开发环境下使用
  mode: 'development',
  module: {},
  plugins: [
    new HtmlWebpackPlugin({
      title: '学习webpack的热更新HMR',
      template: path.resolve(__dirname, 'index.html')
    }),
    // 引入 HMR 插件
    new HotModuleReplacementPlugin()
  ],
  // 配置 webpack-dev-server
  devServer: {
    // 静态文件目录的地址
    contentBase: './dist',
    // 开启热更新 HMR
    hot: true
  }
}
